<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2>Promise 初体验</h2>
        <button class="btm btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        // 生成随机数
        function rand(m, n){
            return Math.ceil(Math.random()*(n-m+1))+m-1;
        }

        /**
         * 点击按钮，2s后显示是否中奖（30%概率中奖）
         * 若中奖，弹出：恭喜恭喜，奖品为 10 万RMB劳斯莱斯优惠券
         * 若未中，弹出：再接再励
         */
        const btn = document.querySelector('#btn')
        btn.addEventListener('click', function (){
            // 30% 1-100 1 2 30
            // setTimeout(()=>{
            //     // 获取1-100的一个随机数
            //     let n = rand(1,100)
            //     console.log("n: ", n);
            //     if(n <= 30){
            //         alert('恭喜恭喜，奖品为 10 万RMB劳斯莱斯优惠券！')
            //     }else {
            //         alert('再接再励')
            //     }
            // }, 1000)

            // promise 实现
            // resolve 解决
            // reject 拒绝
            const p = new Promise((resolve, reject)=>{
                // 30% 1-100 1 2 30
                setTimeout(()=>{
                    // 获取1-100的一个随机数
                    let n = rand(1,100)
                    console.log("n: ", n);
                    if(n <= 30){
                        // alert('恭喜恭喜，奖品为 10 万RMB劳斯莱斯优惠券！')
                        resolve(n)   // 将 promise 状态，也就是 p 设置为成功
                    }else {
                        // alert('再接再励')
                        reject(n)    // 将 promise 状态，也就是 p 设置为失败
                    }
                }, 100)
            });

            p.then(
                (n)=>{
                    alert(`恭喜恭喜，奖品为 10 万RMB劳斯莱斯优惠券！中奖数字是${n}`)
                },
                (n)=>{
                    alert(`您的号码是${n}，再接再励`)
                }
            )
        })
    </script>
</body>
</html>
